﻿<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
		<meta charset="utf-8" />
		<script type="text/javascript" src="../../jquery-1.7.js"></script>
		<style type="text/css">
		*{
			margin:0;padding:0;
		}
		html,body{height:100%;width:100%;}
		canvas{display:block;border:1px double #ccc;}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500"></canvas>
		<script type="text/javascript">
		var canvas = $("#myCanvas");
		var context = canvas.get(0).getContext("2d");
		//同于测试叠加的数据
		var glo = 0;
		var count = 0;
		function drawIt(){
			var effArr = ["source-over","destination-over","source-atop","destination-atop","source-in","destination-in","source-out","destination-out","lighter","copy","xor"];
			count = effArr.length;
			context.fillStyle = "rgb(63,169,245)";
			context.fillRect(50,50,100,100);
			context.globalCompositeOperation = effArr[glo];
			glo += 1;
			context.fillStyle = "rgb(255,123,172)";
			context.fillRect(100,100,100,100);
		}
		var _t_ = window.setInterval(function(){
			drawIt();
			if(glo>count){
				glo = 0;
			}
		},500);
		</script>
	</body>
</html>